<template>
    <div class="role-management">
        <h1>角色管理页</h1>
        <el-table :data="roles" border style="width: 100%">
            <el-table-column prop="name" label="角色名称" width="200"></el-table-column>
            <el-table-column prop="description" label="角色描述"></el-table-column>
            <el-table-column label="操作" width="150">
                <template v-slot="scope">
                    <el-button type="primary" size="small" @click="showUpdateForm(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="success" style="margin-top: 20px" @click="showAddForm">新增</el-button>

        <el-dialog
            :title="currentRole.id ? '编辑角色' : '新增角色'"
            :visible.sync="showSaveForm"
            width="50%"
            @close="resetForm"
        >
            <el-form
                :model="currentRole"
                ref="roleForm"
                label-width="100px"
                style="padding: 0 20px"
            >
                <el-form-item label="角色ID">
                    <el-input v-model="currentRole.id" readonly></el-input>
                </el-form-item>
                <el-form-item label="角色名称">
                    <el-input v-model="currentRole.name"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="currentRole.description"></el-input>
                </el-form-item>
                <el-form-item label="API权限">
                    <el-table :data="allApis" border style="width: 100%" max-height="300">
                        <el-table-column prop="id" label="API ID" width="100"></el-table-column>
                        <el-table-column prop="name" label="API名称" width="150"></el-table-column>
                        <el-table-column prop="path" label="API路径"></el-table-column>
                        <el-table-column prop="description" label="API描述"></el-table-column>
                        <el-table-column label="选择" width="80">
                            <template v-slot="scope">
                                <el-checkbox
                                    :value="currentApiIds.includes(scope.row.id)"
                                    @change="toggleApiId(scope.row.id)"
                                ></el-checkbox>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="showSaveForm = false">取消</el-button>
        <el-button type="primary" @click="saveRole">保存</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
// import axios from 'axios';

// Set axios default baseURL
// axios.defaults.baseURL = 'http://localhost:8080';

export default {
    name: 'RoleManagement',
    data() {
        return {
            roles: [],
            allApis: [],
            currentRole: {
                id: '',
                name: '',
                description: '',
            },
            currentApiIds: [],
            showSaveForm: false,
        };
    },
    created() {
        // Load roles and APIs when component is created
        this.$axios
            .get('/role/getall')
            .then(response => {
                if (response.data.success) {
                    this.roles = response.data.data;
                }
            })
            .catch(error => {
                console.error('获取角色列表失败', error);
            });

        this.$axios
            .get('/api/getall')
            .then(response => {
                if (response.data.success) {
                    this.allApis = response.data.data;
                }
            })
            .catch(error => {
                console.error('获取API列表失败', error);
            });
    },
    methods: {
        showUpdateForm(id) {
            this.$axios
                .get(`/role/getById/${id}`)
                .then(response => {
                    if (response.data.success) {
                        const role = response.data.data;
                        this.currentRole = {
                            id: role.id,
                            name: role.name,
                            description: role.description,
                        };
                        this.currentApiIds = role.apiIds || [];
                        this.showSaveForm = true;
                    }
                })
                .catch(error => {
                    console.error('获取角色信息失败', error);
                });
        },
        showAddForm() {
            this.currentRole = {
                id: '',
                name: '',
                description: '',
            };
            this.currentApiIds = [];
            this.showSaveForm = true;
        },
        toggleApiId(apiId) {
            if (this.currentApiIds.includes(apiId)) {
                this.currentApiIds = this.currentApiIds.filter(id => id !== apiId);
            } else {
                this.currentApiIds.push(apiId);
            }
        },
        saveRole() {
            const roleSave = {
                id: this.currentRole.id,
                name: this.currentRole.name,
                description: this.currentRole.description,
                apiIds: this.currentApiIds,
            };
            this.$axios
                .post('/role/save', roleSave)
                .then(response => {
                    if (response.data.success) {
                        this.$message.success('角色保存成功');
                        this.showSaveForm = false;
                        // Reload roles
                        this.$axios.get('/role/getall').then(res => {
                            if (res.data.success) {
                                this.roles = res.data.data;
                            }
                        });
                    }
                })
                .catch(error => {
                    console.error('保存角色失败', error);
                    this.$message.error('保存失败');
                });
        },
        resetForm() {
            this.currentRole = {
                id: '',
                name: '',
                description: '',
            };
            this.currentApiIds = [];
        },
    },
};
</script>

<style scoped>
.role-management {
    padding: 20px;
}
</style>